<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, height=device-height,initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" name="viewport" />
    <title>盘纸剩余</title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            font-size: 0;
        }

        .B1{
            height: calc(19vw);
            width: calc(19vw);
            border-radius: calc(19vw);
            float: left;
            margin:0;
            margin-top: 11%;
            margin-left: calc(2.6vw);
            margin-right: calc(2.6vw);
            font-size: calc(9vw);
            border-width:0.65vw;
            border-color: brown;
            border-style: solid;
            /*background-color: #ffffff;*/
            background-color: rgba(238,232,236,0.96);
            outline: none;

            text-align: center;
            padding:0;
            -webkit-appearance: none;
            display: inline-block;
            color: black;
            /*line-height: calc(19vw);*/
        }



    </style>
</head>
<body >
    <div style="height: 98%;width: 100%;margin: 0;padding: 0;">
<!--        border-style: solid;border-bottom-width: 0.4vh;border-bottom-color: brown;border-top:none;border-left: none;border-right: none;-->
        <div style="height:16.5%;width:100%;">
<!--            <p style="font-size: calc(5vh);margin: 0;padding-top: calc(5vh);margin-left: 3vw;"> 盘纸计算器</p>-->
<!--            <p style="font-size: calc(5vh);margin: 0 auto;float: bottom;padding-top: 3vh; "> 盘纸计算器</p>-->
            <img src="./盘纸计算器03.png" style="height: 6vh;margin-top: 5.5vh;margin-left: 6vw;";>
        </div>

<!--        border-style: solid;border-bottom-width: 0.4vh;border-bottom-color: #bdb7bb;border-top:none;border-left: none;border-right: none;-->
        <div style="height: 13.5%;width: 100%;">
            <div style="height: 100%;width: 50%;float:left;">
                <p style="font-size: calc(3.5vh);margin: 0;padding-top: calc(4vh);margin-left: 6vw;"> 直径</p>
            </div>

            <div style="height: 100%;width: 50%;float: left;">
                <div style="height: 70%;width: 100%;float: top;overflow: hidden;">
                    <p id="P1" style="font-size: calc(6vh);margin: 0;padding:0;padding-top: calc(1vh);float: right;margin-right: 3vw;"> 0</p>
                </div>

                <div style="height: 30%;width: 100%;float: top;">
                    <p style="font-size: calc(3vh);margin: 0;padding-top: calc(-0.3vh);float: right;margin-right: 3vw;"> mm</p>
                </div>


            </div>

        </div>

        <div style="height: 16.5%;width: 100%;border-style: solid;border-bottom-width: 0.2vh;border-bottom-color: #bdb7bb;border-top:none;border-left: none;border-right: none;">
            <div style="height: 100%;width: 50%;float:left;">
                <p style="font-size: calc(3.5vh);margin: 0;padding-top: calc(4vh);margin-left: 6vw;"> 占比</p>
            </div>
            <div style="height: 100%;width: 50%;float:left;">
                <p id="P2" style="font-size: calc(6vh);margin: 0;padding-top: calc(4vh);float: right;margin-right: 3vw;"> 0</p>
            </div>
        </div>

        <div style="height: 50%;width: 100%;text-align: justify;line-height: 50%;">
            <button id="7" class="B1" style="margin-top: 11%; "> 7 </button>
            <button id="8" class="B1" style="margin-top: 11%; "> 8 </button>
            <button id="9" class="B1" style="margin-top: 11%; "> 9 </button>
            <button id="0" class="B1" style="margin-top: 11%; " > 0 </button>

            <button id="4" class="B1"> 4 </button>
            <button id="5" class="B1"> 5 </button>
            <button id="6" class="B1"> 6 </button>
            <button id="de" class="B1" > < </button>

            <button id="1" class="B1"> 1 </button>
            <button id="2" class="B1"> 2 </button>
            <button id="3" class="B1"> 3 </button>
            <button id="AC" class="B1" > AC </button>

        </div>
    </div>


    <script>

        var P1 = document.getElementById("P1");
        var P2 = document.getElementById("P2");

        var B0 = document.getElementById(0);
        B0.addEventListener("click",function (){
            var n = 0;
            var addNew = P1.innerHTML + n.toString();
            var resultNew = (Math.pow(Number(addNew)/2,2) -4624)/64020;
            resultNew = resultNew.toFixed(3);
            if(resultNew<0){
                resultNew = 0;
            }
            P1.innerHTML = Number(addNew);
            P2.innerHTML = resultNew;
        })

        var B1 = document.getElementById(1);
        B1.addEventListener("click",function (){
            var n = 1;
            var addNew = P1.innerHTML + n.toString();
            var resultNew = (Math.pow(Number(addNew)/2,2) -4624)/64020;
            resultNew = resultNew.toFixed(3);
            if(resultNew<0){
                resultNew = 0;
            }
            P1.innerHTML = Number(addNew);
            P2.innerHTML = resultNew;
        })


        var B2 = document.getElementById(2);
        B2.addEventListener("click",function (){
            var n = 2;
            var addNew = P1.innerHTML + n.toString();
            var resultNew = (Math.pow(Number(addNew)/2,2) -4624)/64020;
            resultNew = resultNew.toFixed(3);
            if(resultNew<0){
                resultNew = 0;
            }
            P1.innerHTML = Number(addNew);
            P2.innerHTML = resultNew;
        })

        var B3 = document.getElementById(3);
        B3.addEventListener("click",function (){
            var n = 3;
            var addNew = P1.innerHTML + n.toString();
            var resultNew = (Math.pow(Number(addNew)/2,2) -4624)/64020;
            resultNew = resultNew.toFixed(3);
            if(resultNew<0){
                resultNew = 0;
            }
            P1.innerHTML = Number(addNew);
            P2.innerHTML = resultNew;
        })

        var B4 = document.getElementById(4);
        B4.addEventListener("click",function (){
            var n = 4;
            var addNew = P1.innerHTML + n.toString();
            var resultNew = (Math.pow(Number(addNew)/2,2) -4624)/64020;
            resultNew = resultNew.toFixed(3);
            if(resultNew<0){
                resultNew = 0;
            }
            P1.innerHTML = Number(addNew);
            P2.innerHTML = resultNew;
        })

        var B5 = document.getElementById(5);
        B5.addEventListener("click",function (){
            var n = 5;
            var addNew = P1.innerHTML + n.toString();
            var resultNew = (Math.pow(Number(addNew)/2,2) -4624)/64020;
            resultNew = resultNew.toFixed(3);
            if(resultNew<0){
                resultNew = 0;
            }
            P1.innerHTML = Number(addNew);
            P2.innerHTML = resultNew;
        })

        var B6 = document.getElementById(6);
        B6.addEventListener("click",function (){
            var n = 6;
            var addNew = P1.innerHTML + n.toString();
            var resultNew = (Math.pow(Number(addNew)/2,2) -4624)/64020;
            resultNew = resultNew.toFixed(3);
            if(resultNew<0){
                resultNew = 0;
            }
            P1.innerHTML = Number(addNew);
            P2.innerHTML = resultNew;
        })

        var B7 = document.getElementById(7);
        B7.addEventListener("click",function (){
            var n = 7;
            var addNew = P1.innerHTML + n.toString();
            var resultNew = (Math.pow(Number(addNew)/2,2) -4624)/64020;
            resultNew = resultNew.toFixed(3);
            if(resultNew<0){
                resultNew = 0;
            }
            P1.innerHTML = Number(addNew);
            P2.innerHTML = resultNew;
        })

        var B8 = document.getElementById(8);
        B8.addEventListener("click",function (){
            var n = 8;
            var addNew = P1.innerHTML + n.toString();
            var resultNew = (Math.pow(Number(addNew)/2,2) -4624)/64020;
            resultNew = resultNew.toFixed(3);
            if(resultNew<0){
                resultNew = 0;
            }
            P1.innerHTML = Number(addNew);
            P2.innerHTML = resultNew;
        })

        var B9 = document.getElementById(9);
        B9.addEventListener("click",function (){
            var n = 9;
            var addNew = P1.innerHTML + n.toString();
            var resultNew = (Math.pow(Number(addNew)/2,2) -4624)/64020;
            resultNew = resultNew.toFixed(3);
            if(resultNew<0){
                resultNew = 0;
            }
            P1.innerHTML = Number(addNew);
            P2.innerHTML = resultNew;
        })

        var de = document.getElementById("de");
        de.addEventListener("click",function (){
            var P1Before = P1.innerHTML;
            var addNew = P1Before.substring(0,P1Before.length-1);
            var resultNew = (Math.pow(Number(addNew)/2,2) -4624)/64020;
            resultNew = resultNew.toFixed(3);
            if(resultNew<0){
                resultNew = 0;
            }
            P1.innerHTML = Number(addNew);
            P2.innerHTML = resultNew;
        })

        var AC = document.getElementById("AC");
        AC.addEventListener("click",function (){
            P1.innerHTML = 0;
            P2.innerHTML = 0;
        })


        // // 禁用双指放大
        // document.documentElement.addEventListener('touchstart', function (event) {
        //     if (event.touches.length > 1) {
        //         event.preventDefault();
        //     }
        // }, {
        //     passive: false
        //
        // });
        //
        // // 禁用双击放大
        // var lastTouchEnd = 0;
        // document.documentElement.addEventListener('touchend', function (event) {
        //     var now = Date.now();
        //     if (now - lastTouchEnd <= 300) {
        //         event.preventDefault();
        //     }
        //     lastTouchEnd = now;
        // }, {
        //     passive: false
        //
        // });


    </script>
</body>
</html>